<template>
    <HomePage :side-menu-default-openeds="sideMenuDefaultOpeneds" :side-menu-default-active="sideMenuDefaultActive">
        <div slot="breadcrumbmodule">
            <el-breadcrumb separator-class="el-icon-arrow-right" style="padding:20px;">
                <el-breadcrumb-item :to="{ path: '/redis/param' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>交易测试</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div slot="corechildmodule" id="defaultCorechildModule">
            <div id="formModule">
                <el-form label-width="80px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="系统名称" required>
                                <el-select v-model="selectedSystem" placeholder="清选择系统名称"
                                           @change="preLoadTradeCodeList">
                                    <el-option v-for="item in systemList" :key="item.id"
                                               :label="item.systemAbbr + '-' + item.systemName"
                                               :value="item.systemIndex"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="交易码" required>
                                <el-select v-model="selectedTradeCode" placeholder="请选择交易码">
                                    <el-option v-for="item in tradeCodeList" :key="item.id"
                                               :label="item.tradeCodeIndex + '-' + item.tradeCodeName"
                                               :value="item.tradeCodeIndex"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6" style="margin-left:20px;">
                            <el-button type="primary" icon="el-icon-search" @click="doSearch">查询</el-button>
                            <el-button plain>重置</el-button>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="请求URL">
                                <el-input v-model="tradeUrl"/>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6" style="margin-left:20px;">
                            <el-button type="success" >发起请求</el-button>
                        </el-col>
                    </el-row>
                </el-form>

                <div class="inputAreaWithTitleModule">
                    <div class="moduleWithColor">
                        <div class="moduleTitle">
                            请求报文
                        </div>

                        <el-button type="text" @click="formatTradeRequestMessage">格式化</el-button>
                        <el-button type="text">复制到剪切板</el-button>
                    </div>
                    <el-input v-model="tradeRequestMessage" type="textarea" :rows="25"
                              placeholder="请求报文" resize="none"></el-input>
                </div>

                <div class="outputAreaWithTitleModule">
                    <div class="moduleWithColor">
                        <div class="moduleTitle">
                            响应结果
                        </div>

                        <el-button type="text">复制到剪切板</el-button>
                    </div>
                    <el-input type="textarea" :rows="25" placeholder="响应报文"
                              resize="none"></el-input>
                </div>
            </div>
        </div>
    </HomePage>
</template>

<script>

    //引入主模块
    import HomePage from '@/views/homepage/HomePage'

    export default {
        name: "RedisTradeTest",
        components: {HomePage},
        created() {
            var self = this;
            //加载系统名称的Select框
            self.$api.get('commonController/getSystemList', null, result => {
                self.systemList = result;
            }, error => {
                //如果后续需要对错误进行处理，写在这里就可以了
            });
        },
        mounted() {

        },

        data() {
            return {
                sideMenuDefaultOpeneds: ['2'],
                sideMenuDefaultActive: "/redis/flow/tradeTest",
                systemList: [],//系统select框的值
                selectedSystem: '',//选中的system
                selectedTradeCode: '',//选中的tradeCode
                tradeUrl: '',//要调用的url
                tradeRequestMessage: '',//请求报文
                tradeCodeList: [],//交易码select框的值
                formInline: {
                    user: '',
                    region: ''
                }
            }
        },
        methods: {
            //预加载tradeCodeList
            preLoadTradeCodeList() {
                var self = this;
                var systemIndex = self.selectedSystem;
                var data = new Object();
                data.systemIndex = systemIndex;
                self.$api.get('commonController/getTradeCodeList', data, result => {
                    self.tradeCodeList = result;
                    debugger;
                }, error => {
                    //如果后续需要对错误进行处理，写在这里就可以了
                });
            },
            //格式化请求报文
            formatTradeRequestMessage(){
                var self = this;
                var tradeRequestMessage = self.tradeRequestMessage;
                self.tradeRequestMessage = JSON.stringify(JSON.parse(tradeRequestMessage), null, 4);
            },
            //查询
            doSearch() {
                var self = this;
                var systemIndex = self.selectedSystem;
                var tradeCodeIndex = self.selectedTradeCode;
                var data = new Object();
                data.systemIndex = systemIndex;
                data.tradeCodeIndex = tradeCodeIndex;
                self.$api.get('commonController/getTradeCodeInfo', data, result => {
                    self.tradeUrl = result.tradeUrl;
                    self.tradeRequestMessage = JSON.stringify(JSON.parse(result.tradeRequestMessage), null, 4);
                }, error => {
                    //如果后续需要对错误进行处理，写在这里就可以了
                });
            }
        }
    }
</script>

<style type="text/css">

    #defaultCorechildModule {
        width: 100%;
        height: 800px;
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        float: right;
    }

    #formModule {
        padding: 20px;
    }

    .inputAreaWithTitleModule {
        width: calc(50% - 5px);
        height: 400px;
        float: left;
    }

    .defaultCorechildModule {
        border-top-left-radius: unset;
        border-top-right-radius: unset;
    }

    .outputAreaWithTitleModule {
        width: calc(50% - 5px);
        height: 400px;
        float: right;
    }

    .moduleWithColor {
        background-color: #f2f2f2;
        width: 100%;
        height: 40px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .moduleTitle {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #606266;
        line-height: 40px;
        padding: 0 12px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 80px;
    }
</style>
